<template>
  <div class="sub-box">
    <!--查看附近-->
    <!--广告位-->
    <div class="sub-content">
      <!--轮播-->
      <div class="ad-box">
        <banner :listImg="listImg"></banner>
      </div>
    </div>
    <div class="sub-content">
      <div class="sub-head">
        <span class="b-l">查看附近 </span>
        <div class="more-info">
          <router-link to="">
            <span>更多</span> <i class="arrow-right"></i>
          </router-link>
        </div>
      </div>
      <!--产品展示-->
        <ul class="product-list">
          <li v-for="(item,index) in nearbySommeliers">
            <router-link :to="'/sommelierDetail?id='+item.uid">
              <div class="img-box" ref="imgWidth">
                <img :src="sourceUrl+item.imageUrl" alt="">
              </div>
              <div class="name-info">
                <span class="name">{{item.name}}</span>
                <span class="distance-box">距离 <span class="distance-num">{{item.juli}}</span></span>
              </div>
              <div class="summary">
                <span class="position">侍酒师</span>
                <span class="gender">{{item.sex == 1 ? '男' : '女'}}</span>
                <span class="age">{{item.age}}岁</span>
              </div>
            </router-link>
          </li>
        </ul>
    </div>
    <!--排名-->


    <!--推荐-->
    <span style="display: none">{{youChoiceCityName}}</span>
    <span style="display: none">{{latlng}}</span>
    <span style="display: none">{{testValue}}</span>

  </div>
</template>

<script>
  import '../../../assets/js/vue-impression'
  import global from '../../public/global.vue'
  import banner from '../../public/banner.vue'

  export default {
    name: 'SubSommilires',
    componts: {
      banner
    },
    props:['empty'],
    data() {
      return {
        dataList: [],
        nearbySommeliers: [],//附近的侍酒师
        rankSommeliers: [],//当前城市侍酒师排名
        recommendSommeliers: [],//推荐的侍酒师
        listImg: [
//          {imgUrl: "yl/ad.jpg"},
//          {imgUrl: "yl/ad.jpg"}
        ],
        sourceUrl: global.sourceUrl,
        newCity: '',
      }
    },

    created() {
      this.getBanner();
      var uid = this.$route.query.uid;
      if (uid != undefined) {
        window.localStorage.setItem("shareId",uid);
        setTimeout(() => {
          window.location.href="http://www.yingla9.com/dist/#/";
        }, 300)
      }
      let text ="http://www.yingla9.com/dist/#/?uid="+window.localStorage.getItem("uid");
      global.wxShare("http://www.yingla9.com/dist/#/", "英拉助手",text, this);

    },
    computed: {
      'youChoiceCityName'() {
        let test = this.$store.getters.getCity;
        this.newCity = test;
        return test;
      },
      'latlng'() {
        let test = this.$store.getters.getLatLng;
        return test;
      },
      'testValue'(){
        let idx = global.getCookie("idx");
        let search = this.$store.state.search
        var p1 = window.localStorage.getItem("latlng").split(",");
        let cityId = global.getCookie("searchCityId")
        let url = global.apiUrl + "/sommelier"
        if(idx==0){
          this.$http.get(url + "/getByPosition", {
            params: {
              city: cityId,
              longitude: p1[0],
              latitude: p1[1],
              condition:search,
            }
          }).then(res => {
            if (res.data.code == 0) {
              this.nearbySommeliers = res.data.data;
              for (let i = 0; i < res.data.data.length; i++) {
                let p2 = new Array();
                p2[0] = res.data.data[i].longitude;
                p2[1] = res.data.data[i].latitude;
                let dis = AMap.GeometryUtil.distance(p1, p2);
                self.nearbySommeliers[i].juli = (dis / 1000).toFixed(2);
                if (dis < 10) {
                  self.nearbySommeliers[i].juli = "0.01km";
                } else {
                  self.nearbySommeliers[i].juli = (dis / 1000).toFixed(2) + "km";
                }
              }
//              setTimeout(() => {
////                let width = this.$refs.img;
//                let width2 = this.$refs.imgWidth;
//                alert(width2);
////                for (let i = 0; i < width.length; i++) {
////                  this.$refs.img[i].style.height = width[0].clientWidth + 'px';
////                }
//                for (let i = 0; i < width2.length; i++) {
//                  this.$refs.imgWidth[i].style.height = width2[0].clientWidth + 'px';
//                }
//              }, 100)
            }
          }).catch(function (err) {
            console.error("Error:" + err);
          })
        }
        return  this.$store.state.search
      },
      'filter'(){

      }
    },

    mounted: function () {
      let curCity = this.$store.getters.getCity;
      this.bus.$on('searchData', function (title) {
        console.log("abc")
        console.log(title)
        this.testValue = title
      })
      let width2 = this.$refs.imgWidth;
      console.log(width2);
    },
    methods: {
      postData(result) {
        console.log(result)
        var p1 = window.localStorage.getItem("latlng").split(",");
        let self = this;
        let url = global.apiUrl + "/sommelier"
        self.$http.get(global.apiUrl + "/city/getCityId", {
          params: {city: result}
        }).then(res => {
          //        console.log(res.data);
          if (res.data.code == 0) {
            let cityId = res.data.data;
            global.setCookie("searchCityId",cityId)

            //获取附近侍酒师
            self.$http.get(url + "/getByPosition", {
              params: {
                city: cityId,
                longitude: p1[0],
                latitude: p1[1],
              }
            }).then(res => {
              if (res.data.code == 0) {

                self.nearbySommeliers = res.data.data;

                for (let i = 0; i < res.data.data.length; i++) {
                  let p2 = new Array();
                  p2[0] = res.data.data[i].longitude;
                  p2[1] = res.data.data[i].latitude;
                  let dis = AMap.GeometryUtil.distance(p1, p2);

                  self.nearbySommeliers[i].juli = (dis / 1000).toFixed(2);
//                  if(dis<1000){
//                    if(dis<10){
//                      self.nearbySommeliers[i].juli="贼近";
//                    }else{
//                      self.nearbySommeliers[i].juli=dis.toFixed(1)+"m";
//                    }
//
//                  }else{
                  if (dis < 10) {
                    self.nearbySommeliers[i].juli = "0.01km";
                  } else {
                    self.nearbySommeliers[i].juli = (dis / 1000).toFixed(2) + "km";
                  }
                  //}
                }


                setTimeout(() => {
//                  let width = this.$refs.img;
                  let width2 = this.$refs.imgWidth;
//                  for (let i = 0; i < width.length; i++) {
//                    this.$refs.img[i].style.height = width[0].clientWidth + 'px';
//                  }
                  for (let i = 0; i < width2.length; i++) {
                    this.$refs.imgWidth[i].style.height = width2[0].clientWidth + 'px';
                  }
                }, 100)
              }
            }).catch(function (err) {
              console.error("Error:" + err);
            })
          }
        }).catch(function (err) {
          console.error("Error:" + err);
        })

      },
      getBanner() {
        let self = this;
        let url = global.apiUrl + "/sommelier"
        self.$http.get(url + "/banner", {}).then(res => {
          console.log(res.data.data);
          if (res.data.code == 0) {
            this.listImg = res.data.data
          }
        }).catch(function (err) {
          console.error("Error:" + err);
        })
      },

    },

    watch: {
      'newCity'(newValue) {
        this.postData(newValue)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @bdradius: 8px;
  .sub-box {
    width: 100%;
    background: #f3f3f3;
    .sub-content {
      padding-bottom: 1px;
      margin-bottom: 10px;
      background: #fff;
      font-size: 1rem;
      .sub-head {
        width: 100%;
        padding: 15px 10px 5px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        .b-l {
          display: inline-block;
          height: 16px;
          line-height: 16px;
          padding-left: 5px;
          border-left: 4px solid #D44242;
        }
        .more-info {
          line-height: 19px;
          a {
            font-size: 0.9rem;
            color: #D44242;
            span {
              vertical-align: top;
            }
            .arrow-right {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-top: 2px solid #D44242;
              border-right: 2px solid #D44242;
              margin-left: -4px;
              transform: rotateZ(45deg) scale(0.6);
            }
          }
        }
      }
      /*产品展示*/
      .product-list {
        width: 100%;
        padding: 0 2.5%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        background: #fff;
        margin-bottom: 10px;
        li {
          width: 49%;
          border: 1px solid #eee;
          border-radius: @bdradius;
          margin-bottom: 2%;
          .img-box {
            width: 100%;
            img {
              width: 100%;
              height: 100%;
              border-radius: @bdradius;
            }
          }
          .name-info {
            /*height: 30px;*/
            /*line-height: 30px;*/
            padding: 0 2px;
            margin-top: 10px;
            display: flex;
            font-size: 0.95em;
            justify-content: space-between;
            .name {
              font-weight: bold;
              color: #333;
            }
            .distance-box {
              font-size: 0.8em;
              color: #D44242;
              margin-top: 2px;
            }
          }
          .summary {
            height: 30px;
            line-height: 30px;
            padding: 0 2px;
            font-size: 0.6em;
            color: #fff;
            .position, .gender, .age {
              padding: 2px 8px;
              border-radius: 15px;
            }
            .position {
              background: #FB3F40;
            }
            .gender, .age {
              background: #FF6978
            }
          }
        }
        li:nth-child(even) {
          margin-left: 2%;
        }
      }
      .product-list::-webkit-scrollbar {
        display: none;
      }
      /*广告位*/
      .ad-box {
        width: 100%;
        height: 150px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /*推荐*/
      .recommend-box {
        width: 100%;
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 49%;
          margin-right: 2%;
          border: 1px solid #eee;
          border-radius: @bdradius;
          margin-bottom: 10px;
          .img-box {
            width: 100%;
            img {
              width: 100%;
              height: 100%;
              border-radius: @bdradius;
            }
          }
          .name-info {
            /*height: 30px;*/
            /*line-height: 30px;*/
            padding: 0 2px;
            margin-top: 10px;
            font-size: 0.95em;
            display: flex;
            justify-content: space-between;
            .name {
              font-weight: bold;
              color: #333;
            }
            .distance-box {
              font-size: 0.8em;
              color: #D44242;
              margin-top: 2px;
            }
          }
          .summary {
            height: 30px;
            line-height: 30px;
            padding: 0 2px;
            font-size: 0.8rem;
            color: #fff;
            .position, .gender, .age {
              padding: 1px 10px;
              border-radius: 15px;
            }
            .position {
              background: #FB3F40;
            }
            .gender, .age {
              background: #FF6978;
            }
          }
        }
        li:nth-child(even) {
          margin-right: 0;
        }
      }
    }
  }

</style>
